<template>
  <aside class="bg-transparent" style="max-height: 100vh">
    <n-layout-header class="pt-2 flex justify-center items-center">
      <div class="flex justify-center items-center">
        <img src="@/assets/long.png" style="width: 45px; height: 45px" />
        <n-gradient-text
          v-show="!store.collapsed"
          type="success"
          class="text-lg font-semibold m-0 align-middle whitespace-nowrap"
          >不完善训练平台</n-gradient-text
        >
      </div>
    </n-layout-header>
    <n-scrollbar>
      <n-menu
        :options="menu"
        :collapsed-width="64"
        :collapsed-icon-size="22"
        :collapsed="collapsed"
        :value="active ?? ($route.name as string) ?? $route.path"
        @update:value="onUpdateValue"
      ></n-menu>
    </n-scrollbar>
  </aside>
</template>
<script setup lang="ts">
/**
 *
 */
import { onMounted, ref } from "vue";
/**
 *
 */
import { NGradientText, MenuOption, NScrollbar, NMenu } from "naive-ui";
/**
 *
 */
import { useMenuStore } from "@/store/HomeMenu";
/**
 *
 */
import { storeToRefs } from "pinia";
/**
 *
 */
import { routesToMenu } from "@/utils/index";
/**
 *
 */
import { useRoute, useRouter } from "vue-router";
/**
 * 路由器
 */
import { asideRoutes } from "@/router/routes";
/**
 *
 */
const store = useMenuStore();
/**
 *
 */
const router = useRouter();
/**
 *
 */
const active = ref();
/**
 *
 */
const { menu, collapsed } = storeToRefs(store);
/**
 *
 */
onMounted(() => {
  useMenuStore().setMenu(routesToMenu(asideRoutes));

  console.log("打印", menu);
});

/**
 *
 */
function onUpdateValue(key: string, item: MenuOption) {
  if (router.hasRoute(key)) {
    router.push({ name: key });
  } else {
    router.push({ path: key });
  }
  active.value = key;
  console.log("地址", active.value);
}
</script>
